<!--
 * @Author: your name
 * @Date: 2020-01-04 14:02:59
 * @LastEditTime: 2020-03-26 22:11:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vhr_dev\src\views\ordermanageDjsqd\ordermanageDjsqd.vue
 -->
<template>
  <div>
    <!-- 定金应收单 -->
    <div>
      <el-form
        ref="toclear"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="单据编号" prop="djbh">
          <el-input
          style="width:220px;"
            v-model="formInline.djbh"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="valuedata">
         <el-date-picker
          style="width:220px"
          v-model="valuedata"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          >
        </el-date-picker>
          <!-- <el-date-picker
          style="width:220px;"
            value-format="yyyy-MM-dd"
            v-model="formInline.rq"
            type="date"
            placeholder="选择日期"
          ></el-date-picker> -->
        </el-form-item>
        <el-form-item label="原单据号" prop="ydjh">
          <el-input
          style="width:220px;"
            v-model="formInline.ydjh"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="渠道" prop="qddm">
          <!-- <InputSelect v-model="formInline.qddm"></InputSelect> -->
          <el-select style="width:220px;" v-model="formInline.qddm" @change="qdchange" clearable filterable placeholder="请选择">
              <el-option
              v-for="item in qdlist"
              :key="item.code"
              :label="item.name+'['+ item.code +']'"
              :value="item.code"
            >
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="门店/客户" prop="khdm">
         <el-select :disabled="!formInline.qddm" style="width:220px;" v-model="formInline.khdm" clearable filterable  placeholder="请选择">
              <el-option
              v-for="item in khlist"
              :key="item.code"
              :label="item.name+'['+ item.code +']'"
              :value="item.code"
            >
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="收款类型" prop="sklxDm">
          <el-select  style="width:220px;" v-model="formInline.sklxDm" clearable filterable placeholder="请选择">
                  <el-option
                  v-for="item in sklxlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="订货会" prop="dhhdm">
          <el-select style="width:220px;" v-model="formInline.dhhdm" clearable filterable placeholder="请选择">
               <el-option
                  v-for="item in dhhlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="分账信息" prop="fzxx">
          <el-select style="width:220px;" v-model="formInline.fzxx" clearable filterable placeholder="请选择">
               <el-option
                  v-for="item in fzxxlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="单据状态" prop="status">
          <el-select style="width:220px;" v-model="formInline.status" filterable clearable placeholder="请选择">
            <el-option
              v-for="item in orderstatuslist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
           <el-button  @click="onSubmiclear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:right;margin-bottom:20px;">
      <el-button type="success" @click="add">新增</el-button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%"
      :summary-method="getSummaries"
      show-summary>
        <el-table-column label="操作" min-width="120px">
            <template slot-scope="scope">
               <el-button
               type="text"
               size="mini"
               v-if="scope.row.status == '0'"
               @click="handleEdit(scope.row)">编辑</el-button>
               <el-button
               type="text"
               size="mini"
               v-if="scope.row.status == '0'"
               @click="comithander(scope.row)">提交</el-button>
              <el-button
               type="text"
               size="mini"
               v-if="scope.row.status == '1'"
               @click="checkhander(scope.row)">审核</el-button>
               <el-button
               type="text"
               size="mini"
               v-if="scope.row.status == '2'"
               @click="excutehander(scope.row)">执行</el-button>
                <el-button
               type="text"
               size="mini"
               v-if="scope.row.status == '1'||scope.row.status == '2'"
               @click="termhander(scope.row)">终止</el-button>
                <el-button
               type="text"
               size="mini"
               v-if="scope.row.status == '0'"
               @click="deletehander(scope.row.djbh)">删除</el-button>
          </template>  
        </el-table-column>
        <el-table-column prop="status" label="单据状态">
               <template slot-scope="scope">
                    <span v-if="scope.row.status == '0'">初始</span>
                     <span v-if="scope.row.status == '1'">提交</span>
                      <span v-if="scope.row.status == '2'">审核</span>
                       <span v-if="scope.row.status == '3'">执行</span>
                       <span v-if="scope.row.status == '5'">终止</span>
               </template>
        </el-table-column>
        <el-table-column min-width="130px" prop="djbh" label="单据编号">
          <template slot-scope="scope">
               <el-button
               type="text"
               size="mini"
               @click="handleView(scope.row)">{{scope.row.djbh}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="rq" label="日期"></el-table-column>
        <el-table-column prop="qddm" label="渠道">
          <template slot-scope="scope">
                    <span v-if="scope.row.qddmInfo">{{scope.row.qddmInfo.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="khdm" label="门店/客户">
        <template slot-scope="scope">
                    <span v-if="scope.row.khdmInfo">{{scope.row.khdmInfo.name}}</span>
          </template></el-table-column>
        <el-table-column prop="sklxDm" label="收款类型">
          <template slot-scope="scope">
                    <span v-if="scope.row.sklxDmInfo">{{scope.row.sklxDmInfo.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dhhdm" label="订货会">
          <template slot-scope="scope">
                    <span v-if="scope.row.dhhdmInfo">{{scope.row.dhhdmInfo.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fzxx" label="分账信息">
          <template slot-scope="scope">
                    <span v-if="scope.row.fzxxInfo">{{scope.row.fzxxInfo.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="je" label="应收金额">
          <template slot-scope="scope">{{scope.row.je|NumberSet}}</template>
        </el-table-column>
        <el-table-column prop="jeOne" label="已收金额">
          <template slot-scope="scope">{{scope.row.jeOne|NumberSet}}</template>
        </el-table-column>
        <el-table-column prop="bz" label="备注">
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="formInline.total"
        ></el-pagination>
      </div>
    </div>
    <Add
      ref="addOrder"
      v-if="addOrderVisible"
      :visible.sync="addOrderVisible"
    ></Add>
  </div>
</template>
<script>
import InputSelect from "@/components/inputSelect/inputSelect.vue";
import Add from "./dhhadd.vue";
import Moment from "moment";
import { debounce } from "@/utils/sunny"
export default {
  data() {
    // Moment().format("YYYY-MM-DD")
    return {
      debounce:debounce,
      valuedata:[Moment(Moment().add(-30,'day').toDate()).format("YYYY-MM-DD"),Moment().format("YYYY-MM-DD")],
      user: JSON.parse(window.sessionStorage.getItem("user")),
      formInline: {
        djbh:'',
        ydjh:'',
        status:'',
       rq:"",
     qddm:"",
     khdm:"",
     sklxDm:"",
     dhhdm:"",
     fzxx:"",
     total: 0,
     page: 1,
     size: 10
      },
      orderstatuslist: [
        { value: 0, label: "初始" },
        { value: 1, label: "提交" },
        { value: 2, label: "审核" },
        { value: 3, label: "执行" },
        { value: 5, label: "终止" },
      ],
      tableData: [],
      addOrderVisible: false,
      editOrderVisible: false,
      viewOrderVisible:false,
      editdata:'',
      qdlist:[],
        khlist:[],
        sklxlist:[],
        dhhlist:[],
        fzxxlist:[],
        sumInfo:{
          jeOne:'',
          jeTwo:''
        }
    };
  },
  components: {
    InputSelect,
    Add,
  },
  created() {
      console.log(Moment().add(-5,'day').toDate(),'----------')
      this.getlistQdlist();
      this.getlistsklxlist();
      this.getlistdhhlist();
      this.getlistfzxxlist();
      this.getdata();
  },
  methods: {
    onSubmiclear(){
      this.$nextTick(() => {
          this.$refs['toclear'].resetFields();
      })
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          console.log(column)
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(column.property == 'je'){
             sums[index] = this.sumInfo.je;
            return;
          }else if(column.property == 'jeOne'){
            sums[index] = this.sumInfo.jeOne;
          }
        });

        return sums;
      },
        // 获取渠道列表
      getlistQdlist(){
          this.getRequest(
          "/common/getqd?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.qdlist = res.data;
            console.log(res.data)
          }
        });
      },
      //  获取门店客户 
      qdchange(e){
        this.formInline.khdm = ''
          this.getRequest(
          "/common/getmd?&page=1&size=100&qddm="+this.formInline.qddm
        ).then(res => {
          if (res) {
            this.khlist = res.data;
            console.log(res.data)
          }
        });
      },
      // sklxlist  首款类型
      getlistsklxlist(){
          this.getRequest(
          "/earnestmoney/sklx/query?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.sklxlist = res.data;
            console.log(res.data)
          }
        });
      },
     //  订货会
       getlistdhhlist(){
          this.getRequest(
          "/earnestmoney/dhh/query?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.dhhlist = res.data;
            console.log(res.data)
          }
        });
      },
      // 分账信息  getfzxx
      getlistfzxxlist(){
          this.getRequest(
          "/common/getfzxx?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.fzxxlist = res.data;
            console.log(res.data)
          }
        });
      },
      handleEdit(row,refForm){
        // detailEdit
        this.$router.push({path:'/detailEdit',query: row})
        // if (this.$refs[refForm]) {
        //   this.$refs[refForm].initForm();
        //   }
        //   this.editdata = row
        //   this.editOrderVisible = true;
      },
      handleView(row,refForm){
        this.$router.push({path:'/djysdDetailView',query: {djbh:row.djbh}}) 
        if (this.$refs[refForm]) {
          this.$refs[refForm].initForm();
          }
          this.editdata = row
          this.viewOrderVisible = true;
      },
        deletehander:debounce(function(e){
         this.$confirm('确认删除本条信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/earnestmoney/djysd/delete/'+e).then(res =>{
             if (res.status == "200") {
                this.getdata();
                }
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
           
      }),
        comithander:debounce(function(e){
           e.tjr = this.user.name
           this.postRequest('/earnestmoney/djysd/submit/',e).then(res =>{
             if (res.status == "200") {
                this.getdata();
                }
        })
      }),
     //  审核
        checkhander:debounce(function(e){
          e.checker = this.user.name
           this.postRequest('/earnestmoney/djysd/check/',e).then(res =>{
             if (res.status == "200") {
                this.getdata();
                }
        })
     }),
    //  执行 
    excutehander:debounce(function(e){
      // e.zdr = this.user.name
      let data = {
        djbh:e.djbh,
        zdr:this.user.name
      }
      this.postRequest('/earnestmoney/djysd/excute/',data).then(res =>{
             if (res.status == "200") {
              //  跳转到最后一个应收单编辑状态     "obj": "DJSQ20200309001"
                if(res.obj){
                  var arr = res.obj.split(',');
                  if(arr.length>0){
                    this.$router.push({path:'/djsqdDetailEdit',query: {djbh:arr[arr.length-1]}})
                  }
                }
                }
        })
    }),
     //  终止
       termhander:debounce(function(e){
          e.zzr = this.user.name
           this.postRequest('/earnestmoney/djysd/term/',e).then(res =>{
             if (res.status == "200") {
                this.getdata();
                }
        })
     }),
    add(refForm) {
      if (this.$refs[refForm]) {
        this.$refs[refForm].initForm();
      }
      this.addOrderVisible = true;
    },
    onSubmit() {
      console.log(this.valuedata);
      if(this.valuedata&&this.valuedata.length){
        this.formInline.startRq = this.valuedata[0]
        this.formInline.endRq = this.valuedata[1]
      }else{
         this.formInline.startRq = ''
        this.formInline.endRq = ''
      }
      this.getdata();
    },
    getdata() {
      console.log(this.tool.pars(this.formInline))
      this.getRequest(
        "/earnestmoney/djysd/query?" +this.tool.pars(this.formInline)).then(res => {
        if (res) {
          this.tableData = res.data;
          this.formInline.total = res.total;
          this.sumInfo = res.sumInfo
        }
      });
    },
    sizeChange(size) {
      this.formInline.size = size;
      this.getdata();
    },
    currentChange(page) {
      this.formInline.page = page;
      this.getdata();
    }
  }
};
</script>
<style></style>
